<template>
  <div class="home">
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="iscollapse ? '64px' : '200px'">
        <div class="logo" @click="click_logo">
          <i class="el-icon-s-tools" style="margin-right: 5px"></i
          ><span v-if="islogo">Console</span>
        </div>
        <el-menu
          :collapse="iscollapse"
          :default-active="navname"
          background-color="#323744"
          text-color="#fff"
          active-text-color="#409BFF"
          unique-opened
          :collapse-transition="false"
          router
        >
          <el-submenu
            v-for="item1 in rightlist"
            :index="item1.id + ''"
            :key="item1.id"
          >
            <template slot="title">
              <i :class="item1.icon"></i>
              <span>{{ item1.authName }}</span>
            </template>
            <el-menu-item
              v-for="item2 in item1.children"
              :index="item2.path"
              :key="item2.id"
              @click="saveNavState(item2.path)"
            >
              <i class="el-icon-menu"></i>
              <span>{{ item2.authName }}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
        <div class="progress">
          <el-progress :show-text="false" :percentage="capacity"></el-progress>
          <p v-if="islogo">
            当前空间：
            {{ (userinfo.maxcapacity - userinfo.capacity).toFixed(2) + "MB" }} /
            {{ userinfo.maxcapacity + "MB" }}
          </p>
        </div>
      </el-aside>

      <el-container>
        <!-- 头部 -->
        <el-header class="header">
          <div class="menu_click" @click="toggleCollapse">
            <i class="el-icon-s-fold"></i>
          </div>
          <div class="header_right">
            <el-dropdown>
              <span class="el-dropdown-link">
                {{ userinfo.username
                }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="editUserinfo"
                  >个人资料</el-dropdown-item
                >
                <el-dropdown-item divided @click.native="login_out"
                  >退出</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <!-- 主体 -->
        <el-main>
          <router-view></router-view>
        </el-main>
        <!-- 底部 -->
        <el-footer
          >请勿上传违反中国大陆和香港法律的图片，违者后果自负.</el-footer
        >
      </el-container>
    </el-container>
    <div class="cover" @click="aside_click"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 菜单列表
      rightlist: [],
      iscollapse: false,
      islogo: true,
      navname: sessionStorage.getItem("navname"),
      clientWidth: document.documentElement.clientWidth,
      userinfo: JSON.parse(sessionStorage.getItem("userinfo")),
    };
  },
  created() {
    // 获取菜单列表
    this.getRightList();
    // console.log(this.userinfo);
    // console.log(this.capacity);
    console.log(11);
  },
  methods: {
    // 获取菜单列表
    async getRightList() {
      const { data: res } = await this.$http.get("/rights");
      if (res.meta.status != 200) {
        this.$message.error("获取菜单列表失败！");
        return;
      }
      this.rightlist = res.data;
      // console.log(this.rightlist);
    },
    // 切换菜单的折叠和展开
    toggleCollapse() {
      if (this.clientWidth < 750) {
        this.iscollapse = false;
        this.islogo = true;
        document.querySelector(".el-aside").style.left = "0px";
        document.querySelector(".cover").style.display = "block";
        return;
      }
      this.iscollapse = !this.iscollapse;
      this.islogo = !this.islogo;
    },
    saveNavState(path) {
      sessionStorage.setItem("navname", path);

    },
    aside_click() {
      let cover = document.querySelector(".cover");
      cover.addEventListener("click", () => {
        document.querySelector(".el-aside").style.left = "-200px";
        cover.style.display = "none";
      });
    },
    // 退出
    login_out() {
      this.$confirm("此操作将永久退出登陆, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          sessionStorage.clear();
          this.$router.push("/");
          this.$message.success("退出登陆成功！");
        })

        .catch(() => {});
    },
    // 点击logo 触发的函数
    click_logo() {
      this.$router.push("/index", (err) => {});
      sessionStorage.removeItem("navname");
      this.navname = "";
    },
    editUserinfo() {
      this.$router.push("/editpwd", (err) => {});
    },
  },
  computed: {
    capacity() {
      let num = (this.userinfo.maxcapacity - this.userinfo.capacity).toFixed(2);
      return Math.round((num / this.userinfo.maxcapacity) * 10000) / 100.0;
    },
  },
  mounted() {
    window.onresize = () => {
      // 实时获取浏览器的宽度
      this.clientWidth = document.documentElement.clientWidth;
    };
  },
};
</script>

<style scoped>
.el-container {
  width: 100% !important;
  height: 100vh !important;
}
.el-aside {
  position: relative;
  background: #323744;
  transition: all 0.3s;
  overflow: hidden;
  height: 100vh;
}
.el-aside .logo {
  height: 50px;
  text-align: center;
  line-height: 50px;
  background: #282c36;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
}
.header {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  height: 50px !important;
  padding-left: 10px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.header_right {
  height: 100%;
  margin-right: 5%;
  line-height: 50px;
}
.login_out {
  box-sizing: border-box;
  padding: 0 5px;
  height: 100%;
  color: #405d7a;
  line-height: 50px;
  font-size: 14px;
  cursor: pointer;
}
.el-dropdown-menu__item {
  text-align: center !important;
}

.login_out:hover {
  background: #eeeeee;
}
.menu_click {
  cursor: pointer;
  line-height: 50px;
  font-size: 20px;
  max-width: 20px;
  box-sizing: border-box;
}
.cover {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  background: rgba(0, 0, 0, 0.3);
}
.progress {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 5px;
  bottom: 30px;
  left: 0;
}
.progress p {
  margin-top: 5px;
  text-align: center;
  color: #fff;
  font-size: 12px;
}
.el-footer {
  height: 30px !important;
  color: #4e4e4e;
  text-align: center;
  font-size: 12px;
}
@media screen and (min-width: 750px) {
  .el-aside {
    position: relative;
    left: 0 !important;
  }
}
@media screen and (max-width: 750px) {
  .el-aside {
    position: absolute;
    transition: all 0.3s;
    left: -200px;
    z-index: 999;
  }
}
</style>
